<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>videoToCanvas.coffee</title>
  <link rel="stylesheet" href="http://github.com/jashkenas/docco/raw/0.3.0/resources/docco.css">
</head>
<body>
<div id='container'>
  <div id="background"></div>
  <div id="jump_to">
    Jump To &hellip;
    <div id="jump_wrapper">
      <div id="jump_page">
          <a class="source" href="addText.html">addText.coffee</a>
          <a class="source" href="canvasDraw.html">canvasDraw.coffee</a>
          <a class="source" href="saveImage.html">saveImage.coffee</a>
          <a class="source" href="videoToCanvas.html">videoToCanvas.coffee</a>
      </div>
    </div>
  </div>
  <table cellspacing=0 cellpadding=0>
  <thead>
    <tr>
      <th class=docs><h1>videoToCanvas.coffee</h1></th>
      <th class=code></th>
    </tr>
  </thead>
  <tbody>
    <tr id='section-1'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-1">&#182;</a>
        </div>
        <p>draw the video to a canvas element</p>

      </td>
      <td class=code>
        <div class='highlight'><pre><span class="n">document</span><span class="o">.</span><span class="n">addEventListener</span> <span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span> <span class="o">-&gt;</span>
  <span class="n">v</span> <span class="o">=</span> <span class="err">$</span><span class="p">(</span><span class="s1">&#39;#v&#39;</span><span class="p">)</span>
  <span class="n">canvas</span> <span class="o">=</span> <span class="err">$</span><span class="p">(</span><span class="s1">&#39;#c&#39;</span><span class="p">)</span>
  <span class="n">context</span> <span class="o">=</span> <span class="n">canvas</span><span class="o">.</span><span class="n">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">)</span>
  <span class="n">cw</span> <span class="o">=</span> <span class="n">canvas</span><span class="o">.</span><span class="n">clientWidth</span>
  <span class="n">ch</span> <span class="o">=</span> <span class="n">canvas</span><span class="o">.</span><span class="n">clientHeight</span>
  <span class="n">canvas</span><span class="o">.</span><span class="n">width</span> <span class="o">=</span> <span class="n">cw</span>
  <span class="n">canvas</span><span class="o">.</span><span class="n">height</span> <span class="o">=</span> <span class="n">ch</span>
  <span class="n">v</span><span class="o">.</span><span class="n">addEventListener</span> <span class="s1">&#39;play&#39;</span><span class="p">,</span>  <span class="o">-&gt;</span> 
    <span class="n">draw</span> <span class="n">this</span><span class="p">,</span><span class="n">context</span><span class="p">,</span><span class="n">cw</span><span class="p">,</span><span class="n">ch</span>

<span class="n">draw</span> <span class="o">=</span> <span class="p">(</span><span class="n">v</span><span class="p">,</span><span class="n">c</span><span class="p">,</span><span class="n">w</span><span class="p">,</span><span class="n">h</span><span class="p">)</span> <span class="o">-&gt;</span>
  <span class="k">if</span> <span class="n">v</span><span class="o">.</span><span class="n">paused</span> <span class="ow">or</span> <span class="n">v</span><span class="o">.</span><span class="n">ended</span>
    <span class="k">return</span> <span class="kp">false</span>
  <span class="n">c</span><span class="o">.</span><span class="n">drawImage</span> <span class="n">v</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="n">w</span><span class="p">,</span><span class="n">h</span>
  <span class="n">setTimeout</span> <span class="n">draw</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="n">v</span><span class="p">,</span><span class="n">c</span><span class="p">,</span><span class="n">w</span><span class="p">,</span><span class="n">h</span></pre></div>
      </td>
    </tr>
  </table>
</div>
</body>
